<template>
  <div style="max-height: 60vh; overflow: auto">
    <el-button size="mini" type="primary" @click="copyToClipboard">一键复制</el-button>
    <vue-json-pretty :data="graphData"> </vue-json-pretty>
  </div>
</template>
<script>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

export default {
  props: {
    graphData: { type: Object, default: () => {} },
  },
  components: { VueJsonPretty },
  methods: {
    // 实现复制功能
    copyToClipboard() {
      const textToCopy = JSON.stringify(this.graphData) // 将 aaa 对象转换为字符串
      if (navigator.clipboard) {
        navigator.clipboard
          .writeText(textToCopy)
          .then(() => {
            this.$message.success('复制成功！')
          })
          .catch(() => {
            this.$message.error('复制失败，请手动复制')
          })
      } else {
        // 备用方案：使用 textarea 实现复制
        const textarea = document.createElement('textarea')
        textarea.value = textToCopy
        document.body.appendChild(textarea)
        textarea.select()
        document.execCommand('copy')
        document.body.removeChild(textarea)
        this.$message.success('复制成功！')
      }
    },
  },
}
</script>
<style scoped></style>
